<template>
  <div class="container clearfix" @click="showOpera(null)">
    <div class="top-box">
      <div class="search">
        <el-input placeholder="搜索项目" v-model="value" clearable>
          <unit-icon
            slot="prefix"
            class="troila-icon"
            type="search"
            size="16"
            color="#696A75"
          />
        </el-input>
      </div>
      <div class="total">
        共{{ total }}个项目
        <el-tooltip
          class="item"
          effect="dark"
          content="创建项目"
          placement="top"
        >
          <unit-icon
            class="troila-icon AbleClick"
            style="margin: -2px 0 -2px 14px; vertical-align: top"
            color="#3d7eff"
            type="addProject"
            size="18"
            @click.native="showAddProjectDialog = true"
            v-if="hasButton(`workbench:add`)"
          />
        </el-tooltip>
      </div>
    </div>
    <div class="scrollBox">
      <div class="noProj" v-if="!total && !loading">
        <img src="../../../assets/images/empty/noList.png" alt="" />
        <span>暂无项目</span>
      </div>
      <div class="thisLoading" v-if="!total && loading" v-loading="true"></div>
      <el-scrollbar class="scroll">
        <div></div>
        <div class="projectBox clearfix">
          <!-- <div
            class="box addProj"
            @click="showAddProjectDialog = true"
            v-if="hasButton(`workbench:add`)"
          >
            <div class="box-content">
              <img
                :src="require('@/assets/images/workbench/add.png')"
                alt=""
                class="addImg"
              />
              <p class="addText">新建项目</p>
            </div>
          </div> -->
          <div
            class="box proj"
            v-for="item in items"
            :key="item.id"
            @mouseleave="showOpera(null)"
            @click="checkProj(item.id)"
          >
            <div class="box-content">
              <!-- <img
                :src="require('@/assets/images/workbench/projectImg.png')"
                alt=""
                class="projectImg"
              /> -->
              <i class="projectImg CoverImg">
                <img
                  :src="require('@/assets/images/workbench/main-project.png')"
                  alt=""
                />
              </i>
              <p class="projectText">{{ item.projcetName }}</p>
              <p class="projectText smallText">
                创建人：{{ item.author || '--' }}
              </p>
              <div
                class="moreIcon"
                @click.stop="showOpera(item.id)"
                v-if="
                  hasButton(`workbench:setUp`) || hasButton(`workbench:delete`)
                "
              >
                <unit-icon
                  class="troila-icon"
                  type="more"
                  size="18"
                  color="#7E8695"
                />
                <transition name="el-zoom-in-top">
                  <ul class="card-operation" v-if="operaFlag == item.id">
                    <li @click="setProj(item)" v-limit="`workbench:setUp`">
                      <unit-icon
                        class="troila-icon"
                        type="systemLine"
                        size="16"
                        color="#7E8695"
                      />设置
                    </li>
                    <li
                      @click="deleteProj(item.id)"
                      v-limit="`workbench:delete`"
                    >
                      <unit-icon
                        class="troila-icon"
                        type="deleteSolid"
                        size="14"
                        color="#7E8695"
                        style="margin-top: -1px"
                      />删除
                    </li>
                  </ul>
                </transition>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <!-- <add-project v-model="showAddProjectDialog" @change="getList" />
    <setting-project
      v-model="showSettingProjectDialog"
      :settingData="settingData"
      @change="getList"
    /> -->
  </div>
</template>

<script>
// import addProject from './dialog/addProject'
// import settingProject from './dialog/settingProject'
import { setProjList, setProjId, setProjInfo } from '@/assets/js/auth.js'
export default {
  name: 'workbench',
  components: {
    // addProject,
    // settingProject,
  },
  data() {
    return {
      value: '',
      total: 0,
      loading: false,
      noProj: true,
      items: [],
      itemsNew: [],
      operaFlag: null,
      showAddProjectDialog: false,
      showSettingProjectDialog: false,
      settingData: {},
    }
  },
  computed: {},
  watch: {
    value(v) {
      //   console.log(v)
      if (v) {
        var arr = this.itemsNew
        this.items = arr.filter((item, index) =>
          item.projcetName.includes(this.value)
        )
        arr = this.itemsNew
      } else {
        this.items = this.itemsNew
      }
      //   this.items = v ? (this.items.filter((item, index) =>
      //     item.projcetName.includes(this.value)
      //   )) : this.itemsNew
      // console.log(this.items)
      this.total = this.items.length
    },
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.items = [{}, {}, {}, {}]
        this.itemsNew = this.items
        this.total = this.items.length
      }, 100)
      return
    },
    showOpera(code) {
      // console.log(code)
      this.operaFlag = this.operaFlag == code ? null : code
    },
    deleteProj(data) {
      let text_ = `删除后将无法恢复，请谨慎操作！`
      this.$confirmFn(text_, '删除提示', {
        callback: (action, instance) => {
          if (action == 'cancel ') {
            return
          } else if (action == 'confirm') {
            // console.log(method, row)
            this.API.workbench
              .removeProj({ id: data })
              .then((res) => {
                if (res.code === 1) {
                  this.$alertFn.success(`删除成功 ！`)
                  this.getList()
                }
              })
              .catch((e) => {})
          }
        },
      })
    },
    checkProj(data) {
      this.$router.push({
        name: 'codeGeneration',
      })
    },
  },
}
</script>

<style scoped>
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.container {
  width: 100%;
  height: 100%;
}
.container .top-box {
  margin: 0 5%;
}
.container .search {
  margin-left: auto;
  width: 247px;
  padding: 23px 0 0 0;
}
.container .total {
  padding-bottom: 10px;
  text-align: left;
  color: #8f8f8f;
}
.container .noProj {
  position: absolute;
  padding: 12vh 0 4vh;
  top: 12vh;
  bottom: 4vh;
  left: 40%;
}
.container .noProj > span {
  display: block;
  font-size: 18px;
  color: #33495d;
  letter-spacing: 4px;
}
.container .projectBox {
  display: flex;
  flex-wrap: wrap;
  margin: 25px 5% -10px;
  font-size: 0;
}
@media screen and (min-width: 1808px) {
  .container .top-box {
    margin: 0 auto;
    max-width: 1600px;
  }
  .container .projectBox {
    margin: 25px auto -10px;
    max-width: 1600px;
  }
}
.container .projectBox .box {
  display: inline-block;
  /* width: 326px;
  height: 261px; */
  width: calc(88% / 5);
  margin-bottom: 31px;
  margin-right: 3%;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
  z-index: 1;
}
.container .projectBox .box:nth-child(5n) {
  margin-right: 0;
}
.container .projectBox .box > * {
  position: relative;
  transition: transform 0.15s ease;
}
.container .projectBox .box::before {
  content: '';
  display: block;
  /* position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0; */
  /* padding-bottom: 80%; */
  padding-bottom: 100%;
  transition: transform 0.15s ease, z-index 0s linear 0s;
  background: #ffffff;
  border: 1px solid #eeeeee;
  box-shadow: 1px 2px 2px 0px rgba(44, 48, 76, 0.06);
  border-radius: 5px;
}
.container .projectBox .box > .box-content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 7%;
}
/* .container .projectBox .proj::before {
  background: url('../../../assets/images/workbench/solid.png') center
    center/100% 100% no-repeat;
}
.container .projectBox .addProj::before {
  background: url('../../../assets/images/workbench/dashed.png') center
    center/100% 100% no-repeat;
} */
.container .projectBox .box:hover,
.container .projectBox .box:visited {
  z-index: 2;
  transition: transform 0.15s ease, z-index 0s linear 0.15s;
}
.container .projectBox .box:hover::before,
.container .projectBox .box:visited::before,
.container .projectBox .box:hover > *,
.container .projectBox .box:visited > * {
  transform: scale(1.05);
  z-index: 2;
  transition: transform 0.15s ease, z-index 0s linear 0.15s;
}
.container .projectBox .addProj .addImg {
  margin: 22% auto 8% auto;
  width: 16.65%;
  padding-right: 2px;
}
.container .projectBox .addProj .addText {
  color: #3d7eff;
  color: #3d7eff;
  font-size: 19px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.container .projectBox .proj .projectImg {
  /* margin: 21% auto 9% auto;
  padding-right: 2px;
  width: 21.25%; */
  margin: 1px;
  width: calc(100% - 2px);
  height: 70%;
  border-bottom: 1px solid #eeeeee;
  display: block;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.container .projectBox .proj .projectImg img {
  transition: transform 0.15s ease;
}
.container .projectBox .proj:hover .projectImg img {
  transform: scale(1.04);
}
.container .projectBox .proj .projectText {
  line-height: 24px;
  font-size: 17px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(75, 80, 113, 1);
  width: 85%;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.5;
}
.container .projectBox .proj .projectText.smallText {
  font-size: 15px;
}
.container .projectBox .proj .moreIcon {
  opacity: 0;
  /* margin: 30px 19px 12px 282px; */
  position: absolute;
  padding: 4px;
  transform: scale(0.92);
  transition: all 0.15s ease;
  bottom: 6%;
  right: 4%;
}
.container .projectBox .proj .moreIcon > svg {
  transition: fill 0.2s ease;
}
.container .projectBox .proj .moreIcon:hover > svg {
  fill: #3d7eff;
}
.container .projectBox .box:hover .moreIcon {
  margin-top: 34px;
  opacity: 1;
}
.container .scrollBox {
  height: calc(100% - 78px);
}
.card-operation {
  position: absolute;
  right: -16px;
  top: 48px;
  width: auto;
  min-width: 106px;
  box-sizing: border-box;
  text-align: center;
  padding: 6px 0;
  line-height: 34px;
  font-size: 14px;
  background-color: #fff !important;
  box-shadow: 0px 3px 7px 0px rgba(44, 47, 75, 0.06);
  border-radius: 5px;
  z-index: 11;
  border: 1px solid #eeeeee;
}
.card-operation::before {
  content: '';
  display: block;
  position: absolute;
  top: -8px;
  right: 21px;
  width: 0;
  height: 0;
  z-index: 1;
  border-bottom: 8px solid #eeeeee;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.card-operation::after {
  content: '';
  display: block;
  position: absolute;
  top: -7px;
  right: 21px;
  width: 0;
  height: 0;
  z-index: 2;
  border-bottom: 8px solid #fff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}
.card-operation > li {
  color: #696a70;
  transition: background-color 0.15s ease;
  line-height: 14px;
  padding: 10px 0;
  text-indent: -6px;
}
.card-operation > li > svg {
  margin: 0 6px 0 -4px;
  vertical-align: top;
}
.card-operation > li:nth-child(1) > svg {
  margin: -2px 5px -1px -5px;
}
.card-operation > li:hover {
  background-color: #f4f8ff;
}
.container /deep/ .search .el-input .el-input__inner {
  padding-left: 40px;
  border-radius: 20px;
  width: 247px;
}
.container /deep/ .search .el-input .el-input__inner:focus,
.container /deep/ .search .el-input.is-active .el-input__inner {
  border-color: #3d7eff;
}
.container
  /deep/
  .search
  .el-input
  .el-input__inner:focus
  + .el-input__prefix
  svg {
  fill: #3d7eff;
  fill: #3d7eff;
}
.container /deep/ .search .el-input .el-input__prefix {
  padding: 0 10px;
}
.container /deep/ .search .el-input .el-input__prefix > svg {
  margin-top: 12px;
  transition: fill 0.1s;
}
.container /deep/ .scroll {
  height: 100%;
}
.troila-icon.AbleClick:hover {
  opacity: 0.8;
}
.thisLoading {
  height: 300px;
}
.thisLoading >>> .el-loading-mask {
  background-color: transparent;
}
</style>
